<template>
  <Menu>
    <div v-for="menu in menuList" :key="menu.name">
      <MenuItem :name="menu.name" v-if="!menu.nextFloor">
        <router-link :to="menu.link">{{ menu.item }}</router-link>
      </MenuItem>
      <Submenu v-if="menu.nextFloor" :name="menu.name">
        <template slot="title">
          <Icon type="ios-paper" />
          {{ menu.item }}
        </template>
        <MenuItem
          v-for="floor in menu.nextFloor"
          :key="floor.name"
          :name="floor.name"
        >
          <router-link :to="floor.link">{{ floor.item }}</router-link>
        </MenuItem>
      </Submenu>
    </div>
  </Menu>
</template>

<script>
export default {
  name: 'bolean-menu',
  data () {
    return {
      menuList: [
        {
          item: 'scss',
          name: '7',
          nextFloor: [
            {
              item: 'scss 颜色',
              link: '/scssColor',
              name: '7-1'
            }
          ]
        },
        {
          item: 'websocket',
          link: '/websocket',
          name: '1'
        },
        {
          item: 'echarts',
          name: '2',
          nextFloor: [
            {
              item: 'echartsBar',
              link: '/echartsBar',
              name: '2-1'
            }
          ]
        },
        {
          item: '折叠面板+多选组合',
          link: '/collapseCheckbox',
          name: '3'
        },
        {
          item: '组件间传值',
          name: '5',
          nextFloor: [
            {
              item: '父子组件传值',
              link: '/parentAndSon',
              name: '5-1'
            },
            {
              item: '兄弟组件传值',
              link: '/brothers',
              name: '5-2'
            },
            {
              item: '祖孙组件传值',
              link: '/grandparentsAndGrandchildren',
              name: '5-3'
            }
          ]
        },
        {
          item: '拓扑视图-gojs',
          name: '6',
          nextFloor: [
            {
              item: '静态拓扑图',
              link: '/topoFitstStage',
              name: '6-1'
            },
            {
              item: '动效拓扑图',
              link: '/topoSecondPhase',
              name: '6-2'
            }
          ]
        }
      ]
    }
  },
  mounted () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass">
</style>
